<template>
    <div class="goods-class">
        <div class="nav">
            <goods-class-nav :goodsType="goodsType"></goods-class-nav>
            <hot-goods></hot-goods>
         </div>
        <div class="goods">
            <goods-list :goods="goods"></goods-list>
        </div>
        <div class="footer-service">
            <div class="block">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="totalPage">
                </el-pagination>
            </div>
            <img src="@/assets/img/common/footer-service.png" alt="" >
        </div>
    </div>
</template>

<script>
    import GoodsClassNav from "./children/GoodsClassNav";
    import HotGoods from "./children/HotGoods";
    import GoodsList from "./children/GoodsList";
    import {sendwithpost} from "../../network/profile";
    import {eventBus} from "../../common/util";
    export default {
        name: "GoodsClass",
        data() {
          return {
              goodsType: {},
              goods: [],
              currentPage: 1,
              totalPage: null,
          }
        },
        components: {
            GoodsClassNav,
            GoodsList,
            HotGoods
        },
        created() {
          this.callback()
        },
        watch: {
            '$route': 'callback'
        },
        mounted() {
          eventBus.$on('screen', (value)=> {
              this.screenGoods(value)
          })
        },
        methods: {
            callback() {
                sendwithpost({
                    url: '/singlegoodstype',
                    data: {
                        value: this.$route.params.id
                    }
                })
                    .then(res=> {
                    if (res.data.res_code === 2) {
                        this.goodsType = {
                            ...res.data.data
                        }
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: 'warning'
                        })
                    }
                })
                sendwithpost({
                    url: '/singlegoods',
                    data: {
                        value: this.$route.params.id,
                        currentPage: this.currentPage
                    }
                })
                    .then(res=> {
                        if (res.data.res_code ==2 ) {
                            this.goods = []
                            this.goods.push(...res.data.goods)
                            this.totalPage = res.data.totalPage
                        }
                    })
            },
            handleCurrentChange(value) {
                this.currentPage = value
                this.callback()
            },
            screenGoods(value) {
                sendwithpost({
                    url: '/singlegoods',
                    data: {
                        value: value,
                        currentPage: this.currentPage
                    }
                })
                    .then(res=> {
                        if (res.data.res_code ==2 ) {
                            this.goods = []
                            this.goods.push(...res.data.goods)
                            this.totalPage = res.data.totalPage
                        }
                    })
            }
        }
    }
</script>

<style scoped>
    .goods-class {
        display: flex;
        width: 960px;
        padding-right: 50px;
        flex: 1;
        margin: 100px auto;
        border-top: 1px solid #000000;
        position: relative;
    }
    .goods-class div:nth-child(2)  {

    }
    .nav {
        width: 190px;
    }
    .goods {
        flex: 1;
        height: 800px;
        overflow: hidden;
    }
    .footer-service {
        position: absolute;
        left: 50%;
        bottom: -50px;
        transform: translate(-50%,100%);
        margin-bottom: 76px;
    }
    .footer-service .block {
        margin-left: 50%;
        transform: translate(0,-50%);
    }
</style>